<template>
  <view class="wrap">
    <view class="popularizationList">
      <view v-if="list && list.length > 0">
        <view class="item" v-for="(item, index) in list" :key="index">
          <image
            class="left"
            src="https://ainengli.meilianshuke.com/jkhx/common/traditionalZY.png"
            alt=""
          />
          <view class="right">
            <view class="top">
              <text class="title">中医体质自测问卷</text>
              <text class="time">{{ formatDate(item.finishedTime, 'yyyy-MM-dd hh:mm') }}</text>
            </view>
            <view class="min">
              <text class="tag">{{ item.symptom }}</text>
              <text class="name" @tap="goDetail(item)">详情</text>
            </view>
          </view>
        </view>
        <!-- <view class="nomores" v-if="state.status == 'nomore'">没有更多了</view> -->
      </view>
      <view class="nodate" v-else>
        <img
          class="img"
          src="https://ainengli.meilianshuke.com/jkhx/weight/traditionalNoData.png"
          alt=""
        />
        <view class="nodate_text">
          <text class="name">暂无数据</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { record_list } from './api'
import { formatDate } from '@/utils/util'
const state = reactive({
  status: 'more',
  pageNum: 0,
  pageSize: 10,
  isRefresh: false,
  isCancel: false
})
const userInfo = ref({})
const list = ref([])
onShow(() => {
  userInfo.value = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  educationListFun()
})

const educationListFun = () => {
  state.pageNum++
  if (state.status == 'nomore') {
    return false
  }
  const param = {
    empi: userInfo.value.empi
  }
  record_list(param).then((res) => {
    if (state.isRefresh == true) {
      state.isRefresh = false
      uni.stopPullDownRefresh()
    }
    uni.hideLoading()
    if (res.code == 0) {
      if (res.data && res.data.length > 0) {
        const dataList = res.data
        // for (let i = 0; i < dataList.length; i++) {
        //   dataList[i].itemContentTwo =
        //     dataList[i].itemContent && JSON.parse(dataList[i].itemContent).content
        //       ? JSON.parse(dataList[i].itemContent).content
        //       : ''
        //   dataList[i].titleTwo =
        //     dataList[i].itemContent && JSON.parse(dataList[i].itemContent).title
        //       ? JSON.parse(dataList[i].itemContent).title
        //       : ''
        //   dataList[i].idTwo =
        //     dataList[i].itemContent && JSON.parse(dataList[i].itemContent).id
        //       ? JSON.parse(dataList[i].itemContent).id
        //       : ''
        // }
        // list.value = list.value.concat(dataList)
        list.value = dataList
        if (res.data.length < 10) {
          state.status = 'nomore'
        } else {
          state.status = 'more'
        }
      } else {
        state.status = 'nomore'
      }
    }
  })
  return true
}

// 跳转详情
const goDetail = (item: any) => {
  uni.navigateTo({
    url: '/module/src/pages/traditionalCMG/recordDetail?id=' + item.questionnaireRecordId
  })
}

// onPullDownRefresh(() => {
//   state.pageNum = 0
//   state.status = 'more'
//   state.isRefresh = true
//   list.value = []
//   educationListFun()
// })
// // 触底事件 - 上拉加载
// onReachBottom(() => {
//   educationListFun()
// })
</script>

<style lang="scss" scoped>
.cf {
  zoom: 1;
}

.cf::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  visibility: hidden;
  content: '.';
}

.wrap {
  min-height: 100vh;
  padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
  text-align: center;
  background: #fafafa;

  .popularizationList {
    display: inline-block;
    width: calc(100% - 64rpx);
    margin: 32rpx 32rpx 0;

    .item {
      padding: 24rpx 32rpx 24rpx 10rpx;
      margin-top: 32rpx;
      overflow: hidden;
      text-align: left;
      background: #fff;
      border-radius: 16rpx;

      &:nth-child(1) {
        margin-top: 0;
      }

      .left {
        display: inline-block;
        width: 80rpx;
        height: 80rpx;
        vertical-align: top;
      }

      .right {
        display: inline-block;
        width: calc(100% - 120rpx);
        margin-left: 20rpx;
        vertical-align: top;

        .top {
          position: relative;
          font-size: 32rpx;
          font-weight: 700;
          color: #222;

          .title {
            display: block;
            padding-right: 220rpx;
            overflow: hidden; // 超出隐藏
            text-overflow: ellipsis;
            white-space: nowrap; // 强制一行显示
          }

          .time {
            position: absolute;
            top: 50%;
            right: 0;
            right: 0rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #666;
            transform: translateY(-50%);
          }
        }

        .min {
          position: relative;
          display: flex;
          align-items: center;
          margin-top: 24rpx;

          .tag {
            display: inline-block;
            max-width: 308rpx;
            height: 56rpx;
            padding: 0 30rpx;
            overflow: hidden;
            font-size: 28rpx;
            font-weight: 500;
            line-height: 56rpx;
            color: #a46b39;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: #f7f2ec;
            border-radius: 8rpx;
          }

          .name {
            position: absolute;
            top: 50%;
            right: 0;
            right: 0rpx;
            height: 56rpx;
            padding: 0rpx 32rpx;
            font-size: 26rpx;
            font-weight: 500;
            line-height: 56rpx;
            color: #a46b39;
            border: 1rpx solid #a46b39;
            border-radius: 38rpx;
            transform: translateY(-50%);
          }
        }
      }
    }

    .nomores {
      padding: 24rpx 0 0;
      font-size: 24rpx;
      color: #999;
      text-align: center;
    }

    .nodate {
      text-align: center;

      .img {
        display: inline-block;
        width: 320rpx;
        height: 240rpx;
        margin-top: 140rpx;
      }

      .nodate_text {
        .name {
          display: block;
          margin-top: 10rpx;
          font-size: 28rpx;
          color: #666;
          text-align: center;
        }
      }
    }
  }
}
</style>
